<template>
  <v-card>
    <v-toolbar class="elevation-0" v-show="authorize.page">
      <v-flex>
        订单状态：
        <v-btn-toggle mandatory v-model.lazy="filter.type">
          <v-btn flat :value="0">
            全部
          </v-btn>
          <v-btn flat :value="1">
            未付款
          </v-btn>
          <v-btn flat :value="2">
            已付款未发货
          </v-btn>
          <v-btn flat :value="3">
            已发货未确认
          </v-btn>
          <v-btn flat :value="4">
            已确认未评价
          </v-btn>
          <v-btn flat :value="5">
            交易关闭
          </v-btn>
          <v-btn flat :value="6">
            交易成功
          </v-btn>
        </v-btn-toggle>
      </v-flex>
      <v-spacer/>
      <v-flex xs3>
        <v-text-field
          append-icon="search"
          label="搜索"
          single-line
          hide-details
          v-model="filter.search"
        />
      </v-flex>
    </v-toolbar>
    <v-divider/>
    <v-data-table
      :headers="headers"
      :items="lists"
      :pagination.sync="pagination"
      :total-items="total"
      :loading="loading"
      class="elevation-1"
      v-show="authorize.page"
    >
      <template slot="items" slot-scope="props">
        <td class="text-xs-center">{{ props.item.username }}</td>
        <td class="text-xs-center">{{ props.item.phone}}</td>
        <td class="text-xs-center">{{ props.item.totalPay/100}}</td>
        <td class="text-xs-center">{{ props.item.actualPay/100 }}</td>
        <td class="text-xs-center">{{ formatPaymentType(props.item.paymentType)}}</td>
        <td class="text-xs-center">{{ props.item.postFee==0?0:props.item.postFee/100}}</td>
        <td class="text-xs-center">{{ props.item.createTime }}</td>
        <td class="text-xs-center">{{ formatSourceType(props.item.sourceType) }}</td>
        <td class="text-xs-center">{{ formatStatus(props.item.status) }}</td>
        <td class="justify-center layout px-0">
          <v-btn v-show="authorize.delete" icon @click="deleteConfirm(props.item.orderId)">
            <i class="el-icon-delete"/>
          </v-btn>
          <v-btn v-show="authorize.detail" icon @click="orderDetail(props.item.orderId)">详情</v-btn>
        </td>
      </template>
    </v-data-table>

    <v-dialog v-model="show" max-width="800px"  scrollable>
      <v-card>
        <!--对话框的标题-->
        <v-toolbar dense dark color="primary">
          <v-toolbar-title>订单详情</v-toolbar-title>
          <v-spacer/>
          <!--关闭窗口的按钮-->
          <v-btn icon @click="closeWindow"><v-icon>close</v-icon></v-btn>
        </v-toolbar>
        <v-card-text class="px-3" style="height: 350px">
          <v-data-table
            :headers="detailHearers"
            :items="detailList"
            :loading="detailLoading"
            class="elevation-0"
            hide-actions
          >
            <template slot="items" slot-scope="props">
                <td class="text-xs-center">{{ props.item.id }}</td>
                <td class="text-xs-center">{{ props.item.title }}</td>
                <td class="text-xs-center">
                  <img v-if="props.item.image" :src="props.item.image" width="50" height="50">
                  <span v-else>无</span>
                </td>
                <td class="text-xs-center">{{ props.item.num }}</td>
                <td class="text-xs-center">{{ props.item.price/100 }}</td>
            </template>
          </v-data-table>
        </v-card-text>
        <v-card-actions>
          <v-spacer/>
          <v-btn color="blue darken-1" flat @click.native="show=false">关闭</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-card>
</template>

<script>

  export default {
    name: "permission",
    data() {
      return {
        filter: {
          type: 0, // 权限类型
          search: '', // 搜索过滤字段
        },
        total: 0, // 总条数
        lists: [], // 当前页品牌数据
        loading: true, // 是否在加载中
        pagination: {}, // 分页信息
        headers: [
          {text: '用户名', align: 'center', sortable: false, value: 'username'},
          {text: '手机号',align: 'center', sortable: false, value: 'phone'},
          {text: '总金额（元）', align: 'center', value: 'totalPay', sortable: false},
          {text: '实付金额（元）', align: 'center', value: 'actualPay', sortable: false},
          {text: '支付类型', align: 'center', value: 'paymentType', sortable: false},
          {text: '邮费（元）', align: 'center', value: 'postFee', sortable: false},
          {text: '下单时间',align: 'center', value: 'createTime', sortable: false},
          {text: '订单来源',align: 'center', value: 'sourceType', sortable: false},
          {text: '订单状态',align: 'center', value: 'status', sortable: false},
          {text: '操作',align: 'center', sortable: false}
        ],
        show: false,// 控制对话框的显示
        isEdit: false, // 是否是编辑
        detailList:[],
        detailLoading:true,
        detailHearers:[
          {text: 'id',align: 'center', sortable: false, value: 'skuId'},
          {text: '商品名',align: 'center', sortable: false, value: 'title'},
          {text: '商品图',align: 'center', sortable: false, value: 'image'},
          {text: '数量',align: 'center', sortable: false, value: 'num'},
          {text: '单价',align: 'center', sortable: false, value: 'price'}
        ],
        authorize:{page:false,delete:false,detail:false}
      }
    },
    mounted() { // 渲染后执行
      // 查询数据
      this.getDataFromServer();
    },
    created(){
      this.$http({
        method: 'GET',
        url: '/user/author/query/other/auth?url='+this.$route.path,
        headers: {"x-authorize-token":this.$storeGet("L_TOKEN")}
      }).then((resp) => {
        if(resp.data.code == 1){
          console.log(resp.data);
          resp.data.data.forEach(m => {
            if(m.url == '/order/web/order/page' && m.method == "POST"){
              this.authorize.page=true;
            }
            if(m.url == "/order/web/query/order/detail/*" && m.method == "GET"){
              this.authorize.detail=true;
            }
            if(m.url == "/order/web/delete/*" && m.method == "DELETE"){
              this.authorize.delete=true;
            }
          })
        }else{
          this.$message.error(resp.data.message);
        }
      }).catch(() => {
        this.$message.error("服务器异常");
      });
    },
    watch: {
      pagination: { // 监视pagination属性的变化
        deep: true, // deep为true，会监视pagination的属性及属性中的对象属性变化
        handler() {
          // 变化后的回调函数，这里我们再次调用getDataFromServer即可
          this.getDataFromServer();
        }
      },
      filter: {// 监视搜索字段
        deep: true,
        handler() {
          this.getDataFromServer();
        }
      }
    },
    methods: {
      getDataFromServer() { // 从服务的加载数的方法。
        // 发起请求
        this.$http({
          method: 'post',
          url: '/order/web/order/page',
          headers: {"x-authorize-token":this.$storeGet("L_TOKEN")},
          data:{
            key: this.filter.search, // 搜索条件
            status: this.filter.type == 0?null:this.filter.type,
            page: this.pagination.page,// 当前页
            rows: this.pagination.rowsPerPage// 每页大小
          }
        }).then( resp => {
          if(resp.data.code == 1){
            this.lists = resp.data.data.items;
            this.total = resp.data.data.total;
            // 完成赋值后，把加载状态赋值为false
            this.loading = false;
          }else{
            this.$message.error(resp.data.message);
          }
        }).catch(() => {
          this.$message.error("服务器异常");
        });
      },
      deleteConfirm(id){
        this.$message.confirm('删除订单不可恢复，继续?', '提示', {
          confirmButtonText: '确定删除',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.deleteOrder(id);
        }).catch(()=>{
          this.$message.info('已取消删除');
        })
      },
      deleteOrder(id){
        this.$http({
          method: 'delete',
          url: '/order/web/delete/'+id,
          headers: {"x-authorize-token":this.$storeGet("L_TOKEN")}
        }).then((resp) => {
          if(resp.data.code == 1){
            this.$message.success("删除成功");
            this.getDataFromServer();
          }else{
            this.$message.error(resp.data.message);
          }
        }).catch(() => {
          this.$message.error("服务器异常");
        });
      },
      orderDetail(id){
        this.show=true;
        this.$http({
          method: 'get',
          url: '/order/web/query/order/detail/'+id,
          headers: {"x-authorize-token":this.$storeGet("L_TOKEN")}
        }).then((resp) => {
          if(resp.data.code == 1){
            this.detailList=resp.data.data;
            this.detailLoading=false;
          }else{
            this.$message.error(resp.data.message);
          }
        }).catch(() => {
          this.$message.error("服务器异常");
        });
      },
      closeWindow(){
        // 关闭窗口
        this.show = false;
      },
      formatPaymentType(type){
        if(type == 1){
          return "在线支付";
        }else if(type == 2){
          return "货到付款";
        }
      },
      formatSourceType(type){
        if(type == 1){
          return "app端";
        }else if(type == 2){
          return "pc端";
        }else if(type == 3){
          return "M端";
        }else if(type == 4){
          return "微信端";
        }else if(type == 5){
          return "手机qq端";
        }
      },
      formatStatus(type){
        if(type == 1){
          return "未付款";
        }else if(type == 2){
          return "已付款未发货";
        }else if(type == 3){
          return "已发货未确认";
        }else if(type == 4){
          return "已确认未评价";
        }else if(type == 5){
          return "交易关闭";
        }else if(type == 6){
          return "交易成功";
        }
      }
    }
  }
</script>

<style scoped>

</style>
